<template>
  <div class="top-bar">
    <!-- <div class="login">
      <router-link class="login-link" to="register">注册</router-link>
      <div>&nbsp;|&nbsp;</div>
      <router-link class="login-link" to="login">登录</router-link>
    </div> -->
    <login-and-out></login-and-out>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import loginAndOut from '@/components/LoginAndOut.vue';

export default defineComponent({
  components: {
    loginAndOut,
  },
  name: 'TopBar',
  setup() {},
});
</script>

<style lang="scss" scoped>
@import '@/assets/css/config.scss';
// .login {
//   padding: 0 !important;
// }

.top-bar {
  display: inline-block;
  background-color: $themeColor;
  height: 40px;
  width: 100%;
  overflow: hidden;
}

// .login {
//   margin: 8px 80px;
//   color: white;

//   div {
//     float: right;
//   }

//   a {
//     margin-top: 4px;
//     float: right;
//     color: white;
//     font-size: 10px;
//     text-decoration: none;
//   }
// }
</style>
